<template>
    <h2 v-if="flag">添加</h2>
    <h2 v-else>编辑：{{ value }}</h2>
    <hr>
    <span>标题</span>
    <input type="text" 
    placeholder="请输入代办标题"
    v-model="value"
    >
    <span>日期</span>
    <input type="date"
    v-model="date"
    >
    <p>
    <button @click="addTable">提交</button>
    </p>
    <p>
    <button @click="flag=true">添加</button>
    </p>
    <table border="1" cellpadding="2" cellspacing="0">
      <thead>
        <tr>
            <th>标题</th>
            <th>日期</th>
            <th>操作</th>
        </tr>
      </thead>
      <div class="container" style="height: 300px;overflow-y: auto;" @scroll="onscroll">
        <div class="scroll" :style="{ height: list.length * 30 + 'px' }">
        <div class="placeholder" :style="{ height: currentIndex * 30 + 'px' }"></div>
      <tbody>
        <tr v-for="item,index in displayArr" :key="item" :style="{ height: '30px' }">
            <td>{{item.value}}</td>
            <td>{{item.date}}</td>
            <td>
                <button @click="edit(index)">编辑</button>
                <button @click="del(index)">删除</button>
            </td>
        </tr>
      </tbody>
    </div>
    </div>
    </table>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            value: '',
            date: '',
            index:0,
            list: JSON.parse(localStorage.getItem('list')) ||[],
            flag:true,
            currentIndex: 0
        }
    },
    // 初始化数组list
    created() {
        this.list =
        // JSON.parse(localStorage.getItem('list')) ||
        Array.from({ length: 1000 }, (_, k) => {
            return {
            index: k + 1,
            value: '标题' + (k + 1),
            date: '2023-03-19'
            }
        })
        console.log(this.list)
    },
    computed: {
        displayArr() {
            return this.list.slice(this.currentIndex, this.currentIndex + 10)
        }
    },
    methods: {
        //提交
        addTable(){
            // 判断表单是否为空
            if(this.value === ''|| this.date === '') return alert('请按照要求填写表单')
            // 判断是否为编辑状态
            if(!this.flag){
                this.list.find(item=>item.id===this.list[this.index].id).value=this.value
                this.list.find(item=>item.id===this.list[this.index].id).date=this.date
                localStorage.setItem('list',JSON.stringify(this.list))
                return
            }
            // 添加
            this.list.push({
                value: this.value,
                date: this.date,
                id:Date.now(),
            })
            this.value = this.date = ''
            localStorage.setItem('list',JSON.stringify(this.list))
        },
        // 编辑
        edit(index){
            this.flag=false
            this.value=this.list[index].value
            this.date=this.list[index].date
            // 将下标挂载到this上
            this.index=index
        },
        // 删除
        del(index){
        // this.list.splice(index,1)
        this.list=this.list.filter(item=>item.id!== this.list[index].id)
        // 编辑后点击删除清空表单
        this.value = this.date = ''
        localStorage.setItem('list',JSON.stringify(this.list))
        },
        onscroll(e){
            const scrollTop = e.target.scrollTop
            // console.log(scrollTop)
            this.currentIndex = Math.floor(scrollTop / 30)
        }
    }
}
</script>
